import { computed, watch, ref } from 'vue'
import { useStore } from 'vuex'

export default function useCd() {
  const cdRef = ref(null)
  const cdImg = ref(null)
  const store = useStore()
  const playing = computed(() => {
    return store.state.playing
  })
  const cdCls = computed(() => {
    return playing.value ? 'playing' : ''
  })
  watch(playing, () => {
    syncTransform(cdRef.value, cdImg.value)
  })
  function syncTransform(wrapper, inner) {
    const wrapperTransform = getComputedStyle(wrapper).transform
    const innerTransform = getComputedStyle(inner).transform
    wrapper.style.transform =
      wrapperTransform === 'none'
        ? innerTransform
        : innerTransform.concat(' ', wrapperTransform)
  }
  return {
    cdRef,
    cdCls,
    cdImg
  }
}
